<template>
  <div class="appTabbar">
    <van-tabbar v-model="active" active-color="#fc6627" route>
      <van-tabbar-item
        :to="item.site"
        v-for="(item, index) in list"
        :key="index"
      >
        <span> {{ item.name }}</span>
        <template #icon="{active}">
          <GeekIcon :name="active ? `${item.icon}-sel` : item.icon"></GeekIcon>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'appTabbar',
  data () {
    return {
      active: 0,
      list: [
        { name: '首页', site: '/home', icon: 'icon-home' },
        { name: '问答', site: '/question', icon: 'icon-qa' },
        { name: '视频', site: '/videos', icon: 'icon-video' },
        { name: '我的', site: '/user', icon: 'icon-mine' }
      ]
    }
  },
  methods: {
    homePath () {
      this.$route.path === '/'
        ? (this.list[0].site = '/')
        : (this.list[0].site = '/home')
    }
  },
  // watch: {
  //   '$route.path': {
  //     handler () {
  //       this.homePath()
  //     }
  //   }
  // },
  created () {
    this.homePath()
  }
}
</script>
<style lang="less" scoped>
.appTabbar {
  .van-tabbar {
    background: #f7f8fa;
  }
  ::v-deep .van-tabbar-item--active {
    color: #fc6627;
    background-color: #f7f8fa;
  }
  ::v-deep .van-tabbar-item__icon {
    font-size: 20px;
  }
  ::v-deep .van-tabbar-item__text {
    font-size: 10px;
  }
}
</style>
